前言

Vue 的方法非常多，但掌握其中 20% 的語法就能夠應對 80% 的情境，就如同學習一門語言一樣，真正常用的詞彙僅佔總詞彙的 10% ~ 20%，只要熟練此部分即可應付大部分的對話情境；開發亦是如此，只要精通、熟練部分語法就能有效加速開發。

Vue 初始化

1. 請使用 CDN 或 Code 的 setting 加入 Vue 的外部資源。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.9/dist/vue.js"></script>

2. 回到 body 中，建立新的元素並且給他一個 id，在此我們使用 id="app" 這個名稱。

<div id="app">
</div>

3. 接下來在頁面的後方加入 <script>（請確保在自訂元素後方或者使用 codepen 的 JS Panel），並加入以下原始碼（到這個步驟已經成功建立 Vue 的應用）。

// 實體化 Vue 物件，並傳入特定屬性及方法
new Vue({

  // 將 Vue 綁定我們所自訂的元素上
  el: '#app',
  
  // Vue 有雙向綁定的特性，在此需要先定義基本的資料才能進行綁定
  data: {
    text: '' // 自訂的資料名稱
  },
});

4. 加入 Vue 的指令於自訂元素之中。

<!-- input 標籤並透過 v-model 綁定我們所自訂的 text 資料名稱 -->
<input class="form-control" v-model="text">

<!-- 將 text 這個資料動態的呈現在畫面上 -->
<div v-text="text"></div>

Vue 指令

資料呈現於畫面上：

如果要將 Vue Data 呈現於畫面上，主要有以下的方式：

• {{}}：使用雙大括號中間可直接插入元件資料或者任何表達式內容來呈現。
• v-text：與前者相同，同時可運用在標籤上。
• v-once：綁定的標籤僅會輸出一次資料於畫面上，往後的更新將不會再做更動。
• v-html：可同時輸出 HTML 結構，在使用上要特別注意：請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容使用插值。（XSS 攻擊），詳細說明可參考：https://cn.vuejs.org/v2/api/#v-html

資料雙向綁定：

• v-model
  說明：用於表單的資料與元件產生雙向綁定
  注意：v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實例的數據作為數據來源。需透過 JavaScript 在元件的 data 選項中宣告初始值。

最常使用的兩大指令（這兩個有提供縮寫的形式）：

• v-on
  說明：可以用 v-on 指令監聽網頁上的事件（如同純 JS 的 DOM 事件），並在觸發時運行一些 Vue 的方法。
• v-bind
  說明：動態地綁定 HTML 屬性，將資料傳遞到元素上。

資料條列、元素隱藏：

• v-for
• v-if, v-else, v-else-if
• v-show
• key